<template>
  <div class="addorder">
    <van-nav-bar
      title="提交订单"
      left-arrow
      class="topNav"
      @click-left="goLeft"
    >
      >
    </van-nav-bar>
    <van-notice-bar
      left-icon="volume-o"
      text="因疫情影响，部分地区无法配送公告"
      scrollable 
    />
    <div class="addressList1" @click="show = !show">
      <ul>
        <li>
          <router-link to="/builtAddress/1" v-if="!defaultAddress">
            <div class="jump" >
              <h3 style="font-size: 13px">
                您尚未设置地址，请点击设置默认地址
              </h3>
              <div class="arrow">
                <img src="../../assets/my/rightarrow.png" alt="" />
              </div>
            </div>
          </router-link>

          <div class="bottom" v-if="defaultAddress">
            <h5 v-if="defaultAddress">收货地址</h5>
            <div class="left">
              <div class="top">
                <span class="name">{{ defaultAddress.name }}</span>
                <span class="phone">{{ defaultAddress.phone }}</span>
              </div>
              <p>
                {{ defaultAddress.area_name }} {{ defaultAddress.desc }}
                {{ defaultAddress.area }}
              </p>
            </div>
          </div>
          <div class="arrow">
            <img src="../../assets/my/rightarrow.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <div class="monenyBox">
      <van-cell-group>
        <van-cell title="暂无可用优惠券" value="0张" is-link />
        <van-cell title="余额" value="0元" is-link />
      </van-cell-group>

      <van-cell-group border="false" class="box">
        <div class="title">
          <van-cell title="实付金额" :value="'￥'+price+'.00'"  :border="false"/>
        </div>
        <div class="line"></div>
        <div class="title">
          <van-cell title="邮费" value="￥0.00"  />
        </div>
        <div class="line"></div>
        <div class="title">
          <van-cell title="活动优惠" :value="'-￥'+originPrice+'.00'"  />
        </div>
        <div class="line"></div>
        <div class="title">
         <van-cell title="新人专属红包" value="-￥15元"  />
        </div>
        <div class="line"></div>
      </van-cell-group>
    </div>
    <div class="goodsList">
      <ul>
        <li v-for="(item, index) in goodsList" :key="item.id">
          <div class="title">
            包裹{{ index + 1 }}<span>支付后，预计48小时内发货</span>
          </div>
          <div class="line"></div>
          <van-card
            :num="item.num"
            :price="!item.sale_price ? item.price : item.sale_price + '.00'"
            :desc="item.desc"
            :title="item.name"
            :thumb="item.s_goods_photos[0].path"
            :origin-price="!item.sale_price ? null : item.price + '.00'"
          />
        </li>
      </ul>
    </div>

    <div class="sendOrder">
      <p>
        实付金额 <span style="color: red">￥{{ price }}</span>
      </p>

      <div class="right">
        <div class="choose"></div>
        <van-button
          type="danger"
          text="结算"
          class="submitButton"
          round
          @click="confirm"
        />
      </div>
    </div>
    <!-- <van-action-sheet title="标题" v-show="show">
   ssssssssss
      <div class="addressList">
        
      </div>
    </van-action-sheet> -->
    <van-action-sheet v-model:show="show" cancel-text="取消">
      <div class="addressList">
        <ul>
          <li
            v-for="(item, index) in adressList"
            :key="index"
            @click="changeAddress(item)"
          >
            <div class="left">
              <div class="top">
                <span class="name">{{ item.name }}</span>
                <span class="phone">{{ item.phone }}</span>
              </div>
              <p>{{ item.area_name }} {{ item.desc }} {{ item.area }}</p>
            </div>
            <div class="arrow">
              <img src="../../assets/my/rightarrow.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, post, deleteService } from "../../utils/request.js";
import { useRoute, useRouter } from "vue-router";
import { mapMutations, mapState, mapActions, useStore } from "vuex";
import { Toast, Dialog } from "vant";
const store = useStore();
const route = useRoute();
const router = useRouter();
const defaultAddress = ref({});
const price = ref(0);
const originPrice= ref(0);
const cardList = ref();
let goodsList = ref([]);
const adressList = ref([]);
const show = ref(false);
//获取默认地址和需提交的订单商品数据
const getData = async () => {
  console.log(route.params.num);
  let result;
  try {
    result = await get(`/defalutAddress`);
  } catch (error) {}
  if (result.status == 200) {
    defaultAddress.value = result.data.result;
    console.log(defaultAddress.value);
  }
  //判断本页面是从哪个页面来的
  if (route.params.num == 1) {
    console.log(store.state.order.goodsOrder);
    goodsList.value.push(store.state.order.goodsOrder);
  } else {
    cardList.value = store.state.order.goodsOrder;
    cardList.value.forEach((ele) => {
      let good = ele.s_good;
      good.num = ele.num;
      goodsList.value.push(good);
    });
    console.log(goodsList.value);
  }
  console.log(goodsList.value);
  goodsList.value.forEach((ele, index) => {
    if (ele.sale_price) {
      price.value += Number(ele.sale_price) * Number(ele.num);
      originPrice.value +=(ele.price-ele.sale_price)*ele.num
    } else {
      price.value += Number(ele.price) * Number(ele.num);
    }
  });
};
const goLeft = () => {
  router.back();
};
const confrimBuy = () => {
  Dialog.confirm({
    title: "确认购买",
    message: "是否要提交订单?",
  })
    .then(() => {
      sendOrder();
    })
    .catch(() => {
      // on cancel
    });
};
const confirm = () => {
  Dialog.confirm({
    title: "确认订单",
    message: "是否要提交本次订单?",
  })
    .then(() => {
      sendOrder();
    })
    .catch(() => {
      // on cancel
    });
};
const sendOrder = async () => {
  Toast.loading({
    message: "正在提交订单，请稍后...",
    forbidClick: true,
    duration: 0,
  });

  const data = {
    addr_id: defaultAddress.value.id,
    goods_info: [],
    project_id: 234,
    shoppingCartIds: [],
  };
  goodsList.value.forEach((ele) => {
    let detail = {
      id: ele.id,
      num: ele.num,
    };
    data.shoppingCartIds.push(ele.id);
    data.goods_info.push(detail);
  });
  console.log(data);
  let result;
  try {
    result = await post("/order", data);
  } catch (error) {
    console.log(error);
    timer = setTimeout(() => {
      Toast.clear();
      Toast.fail({ message: "提交失败，请刷新本页面", forbidClick: true });
      clearTimeout(timer);
    }, 3000);
  }
  if (result.status == 200) {
    console.log(result);
    Toast.clear();
    Toast.success({ message: "提交成功，请刷新本页面", forbidClick: true });
    if (route.params.num == 0) {
      //清空购物车
      cardList.value.forEach((ele) => {
        clearCard(ele.id);
      });
    }
    router.push("/order");
  }
};
//清空购物车
const clearCard = async (id) => {
  let result;
  try {
    result = await deleteService(`/shoppingCart/${id}`);
  } catch (error) {}
  if (result.status == 200) {
    // searchList.value = result.data.result.rows;
    console.log(result);
  }
};
const getAddrenss = async () => {
  let result;
  try {
    result = await get("/address");
  } catch (error) {}
  if (result.status == 200) {
    adressList.value = result.data.result;
    console.log(adressList.value);
  }
};

const changeAddress = (item) => {
  console.log(item);
  defaultAddress.value = item;
  show.value = false;
};

getData();
getAddrenss();
</script>

<style lang="scss" scoped>
.addorder {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  .topNav {
    --van-nav-bar-arrow-size: 18px;
    --van-nav-bar-icon-color: black;
    --van-nav-bar-text-color: black;
  }
  .addressList1 {
    margin-top: 1vh;
    h5 {
      margin: 0;
      margin-bottom: 1vh;
    }
    li {
      background-color: white;
      margin: 0 auto;

      width: 100%;
      height: 15.5vh;

      
      display: flex;
      align-items: center;
      box-sizing: border-box;
      justify-content: space-around;
      position: relative;
      .bottom {
        widows: 100%;
        .left {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .name,
          .phone {
            color: #999999;
            font-size: 3.7vw;
          }

          .phone {
            margin-left: 17vw;
          }
          p {
            color: #333333;
            margin: 0;
            font-size: 3.7vw;
            width: 100%;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
      .arrow {
        width: 4vw;
        height: 3vh;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .jump {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        color: black;
        .arrow {
          width: 4vw;
          height: 3vh;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .monenyBox {
    margin-top: 1vh;
    
    .title {
      font-size: 14px;
     
      height: 5vh;
      line-height: 5vh;
    }
    .line {
  width: 97vw;
  background-color: #d9d9d9;
  float: right;
 
}
.box{
  margin-top: 1vh;
 }
  }
  .goodsList {
    width: 100%;
    margin-top: 3vh;
    padding-bottom: 8vh;
    li {
      background-color: white;
      margin: 0 auto;
      width: 100%;
      margin-top: 1vh;
      .van-card {
        --van-card-background-color: white;
        --van-card-price-color: #f32428;
        margin-top: 0;
      }
      .title {
        font-size: 14px;
        margin-left: 5vw;
        height: 5vh;
        line-height: 5vh;
        span {
          margin-left: 3vw;
          color: #999999;
          font-size: 12px;
        }
        .line {
          width: 97vw;
          background-color: #d9d9d9;
          margin-left: 3vw;
          height: 0.8px;
        }
      }
    }
  }
}

.sendOrder {
  position: fixed;
  display: flex;
  justify-content: space-between;
  padding: 0 3vw;
  bottom: 0;
  width: 100%;
  background-color: white;
  background-color: 0;
  .submitButton {
    width: 30vw;
    margin-right: 6vw;
  }
  .right {
    display: flex;
    align-items: center;

    .choose {
      font-size: 14px;
      p {
        margin: 0;
      }
    }
  }
}
.addressList {
  margin-top: 1vh;
  max-height: 50vh;
  li {
    margin: 0 auto;
    margin-top: 2.3vh;
    width: 90.6vw;
    height: 12.5vh;
    background-color: white;

    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;

    .left {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name,
      .phone {
        color: #999999;
        font-size: 3.7vw;
      }

      .phone {
        margin-left: 17vw;
      }
      p {
        color: #333333;
        margin: 0;
        font-size: 3.7vw;
        width: 80%;
        overflow: hidden;
        word-break: break-all;
      }
    }
    .arrow {
      width: 4vw;
      height: 3vh;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
